<template>
    <div id="app">
        <drag-zone></drag-zone>
        <control-panel></control-panel>
        <options-panel></options-panel>
        <quit-confirm></quit-confirm>
        <lock-down></lock-down>
        <loading-layer></loading-layer>
        <animation-layer></animation-layer>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import ControlPanel from '@/components/ControlPanel';
import QuitConfirm from '@/components/QuitConfirm';
import LockDown from '@/components/LockDown';
import LoadingLayer from '@/components/Loading';
import AnimationLayer from '@/components/AnimationLayer';
import OptionsPanel from '@/components/OptionsPanel';
import DragZone from '@/components/DragZone';

export default {
    name: 'fslide',
    components: {
        DragZone,
        ControlPanel,
        QuitConfirm,
        LockDown,
        LoadingLayer,
        AnimationLayer,
        OptionsPanel
    }
}
</script>

<style lang="scss">
#app {
    display: flex;
    justify-content: center;
    overflow: hidden;
}
</style>
